<template>
    <!-- 我的服务 -->
    <div class="my-service">
        <!-- title -->
        <div class="title">
            <div class="title-left">
                <h2>我的服务项目</h2>
                <p>通过帮助更多的人，为企业培养更优秀的人才，获得更多项目。</p>
            </div>
        </div>
        <!-- servie-list -->
        <div class="service-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
          <div  v-if="PageList.length==0" class="no-text">
              <p class="title-left">暂无</p>
         </div>
            <div class="service-item" v-for="(item,index) in PageList" :key="index">
                <div class="service-item-title">
                    <div class="service-item-title-left">{{item.title}}</div>
                    <!-- <div class="service-item-title-right" @click="handleEdit">更多
                        <svg class="icon" aria-hidden="true" >
                            <use xlink:href="#icon-shang-copy-copy"></use>
                        </svg>
                    </div> -->
                </div>
                <div class="service-item-main">
                    <div class="service-item-main-state">
                        <span>审核状态：{{item.status}}</span>
                        <span>服务费用：<i>￥{{item.price}}</i></span>
                        <span class="buyit" @click="handleBuy(item.id,item.price)">购买服务</span>
                    </div>
                    <div class="service-item-main-html">
                        <h2>服务内容：</h2>
                        <p>{{item.info}}</p>
                    </div>
                     <div class="service-item-main-html">
                        <h2>服务时间：</h2>
                        <pre>{{item.remarks}}</pre>
                    </div>
                </div>
            </div>
            
              <div v-show="loading" class="page-infinite-loading">
                        <mt-spinner type="fading-circle"></mt-spinner>
                        加载中...
        </div>
        <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
        </div>
        <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible" cancelText>
        </mt-actionsheet>
    </div>
</template>

<script>
import headUsual from "@/pages/components/headUsual";
import { Actionsheet,MessageBox} from 'mint-ui';
import {PageList,BuyService} from '@/api/service';
export default {
    data(){
        var that=this;
        return{
            sheetVisible:false, //更多按钮弹窗操作
             actions:[
                {
                name:'编辑',
                method() {
                    that.$router.push('/user/service/add')
                }
                },
                {
                name:'删除',
                method(){
               MessageBox.confirm('确定删除此项?').then(action => {

                    });
                }
                },
           ],
           searchCondition:{
               pageindex:1,
               uid:0,
               cmd:'user'
           },
           loading: false, //是否显示加载中
           allLoaded: true, //加载完毕

           PageList:[],
           totalPage:0
        }
    },
 props: {
    id: Number
  },
    created(){
      this.searchCondition.uid=this.id;
      PageList(this.searchCondition).then(res=>{
          if(res.StatusCode==200){
              this.PageList=res.Data;
              this.totalPage=res.TotalPage;
          }
      });
    },
   
    methods:{
    handleEdit(){
        this.sheetVisible=!this.sheetVisible;
    },
     handleBuy(id,price){
            if(this.searchCondition.uid==0){
                   this.$router.push("/auth/login"); 
            }
          //TODO
          BuyService(id,price).then(res=>{
              if(res.StatusCode===200){
                  this.toast("购买成功");
              }
               else if(res.StatusCode===401){
                  this.$toast("余额不足,正在跳转微信支付");
                  setTimeout(res=>{
                        var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=4&expandId=${id}&summary=筑功者服务咨询&price=${price}&backurl=${window.location.href}`;
                        window.location.href=url;
                  },1500);
                      
                  
              }
             else{
                    this.$toast(res.Data);
              }
          });
    }
    ,
     loadMore() {
      //分页加载更多
        if (this.searchCondition.pageindex >= this.totalPage) {
            this.allLoaded = true;
            return;
        }
        this.loading = true;
        setTimeout(() => {
            this.searchCondition.pageindex++;
            GetPageList(this.searchCondition).then(res => {
            if (res.StatusCode === 200) {
                this.PageList = this.PageList.concat(res.Data);
            }
            });
            this.loading = false;
        }, 1000);
    },
    },
  components: { headUsual }
};
</script>

<style lang="scss" scoped>
.my-service {
  .title {
    border-bottom: 10px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px 13px 12px;
    align-items: center;
    .title-left {
        width: 380px;
      h2 {
        font-size: 14px;
        color: #666;
      }
      p {
        font-size: 12px;
        color: #999;
      }
    }
    .title-right {
     padding: 2px 6px;
      border-radius: 11.5px;
      background: #3887fe;
      color: #fff;
      display: flex;
      align-items: center;
      .icon {
        font-size: 16px;
       
      }
    }
  }
  .service-list{
      .service-item{
          padding: 0 12px;
          border-bottom: 5px solid #f4f4f4;
          &-title{
              height: 54px;
              line-height: 54px;
              
              display: flex;
              justify-content: space-between;
              border-bottom: 1px solid #eee;
              &-left{
                  font-size: 14px;
                  color:#3887fe;
              }
              &-right{
                  font-size: 12px;
                  color:#3887fe;
                  display: flex;
                  align-items: center;
                  .icon{
                      margin-left: 2px;
                  }
              }
          }
          &-main{
              padding: 10px 0 12px 0;
              &-state{
                  font-size: 14px;
                  color: #666;
                  span{
                      margin-right: 16px;
                      i{
                          color:#ff0000;
                          font-style: normal;
                      }
                  }
              }
               &-html{
                   margin-top:5px;     
              h2{
                  font-size: 14px;
                  color:#666;
              }
              p{
                  font-size: 14px;
                  color:#999;
              }
          }
          }
         

      }
  }
}
.buyit{
    display: inline-block;
    margin-left: 15px;
    padding: 3px 4px;
    color: #3887fe;
    border: 1px solid #3887fe;
}
</style>
